
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="YES"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />        
        <link rel="apple-touch-icon" href="images/iphone/apple-touch-icon.png"/>
		<link rel="apple-touch-startup-image" href="images/iphone/startup.png"/>
        
        <title>Energylife beta - r</title>
        
        <!-- Version 0.0.22-SNAPSHOT - ${BUILD_ID}  -->
        
        
         <!-- General stylesheets --><link rel="stylesheet" type="text/css" href="library/general/combine.php?type=css&files=configSensors.css,main.css" />
         <!-- iphone specific stylesheets --> <link rel="stylesheet" type="text/css" href="library/general/combine.php?type=css&platform=iphone&files=browser.css,cardMenu.css,carouselCard.css,circleMenu.css,community.css,historicAnalyze.css,levelinfo.css,mainMenu.css,topInfo.css,z_main.css" />		
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>		
		
		
		<script src="/security-manager-ws/lib/BeImports.js"></script>
        <script src="/security-manager-ws/lib/BeAwareClient.js"></script>
		
        
         <!-- General javascript files --><script type="text/javascript" src="js/general/0_WebKitDetect.js"></script> <script type="text/javascript" src="js/general/0_WebKitTouch.js"></script> <script type="text/javascript" src="js/general/0_jquery.js"></script> <script type="text/javascript" src="js/general/configSensors.js"></script> <script type="text/javascript" src="js/general/defaults.js"></script> <script type="text/javascript" src="js/general/helpfunctions.js"></script> <script type="text/javascript" src="js/general/i18n.js"></script> <script type="text/javascript" src="js/general/jquery.cookie.js"></script> <script type="text/javascript" src="js/general/jquery.timeago.js"></script> <script type="text/javascript" src="js/general/json2.js"></script> <script type="text/javascript" src="js/general/ws_interface.js"></script> 
         <!-- iphone specific javascript files --><script type="text/javascript" src="js/iphone/1_consumptionUpdater.js"></script> <script type="text/javascript" src="js/iphone/1_historicalAnalyze.js"></script> <script type="text/javascript" src="js/iphone/1_levelinfo.js"></script> <script type="text/javascript" src="js/iphone/1_quizUpdater.js"></script> <script type="text/javascript" src="js/iphone/adviceUpdater.js"></script> <script type="text/javascript" src="js/iphone/app.js"></script> <script type="text/javascript" src="js/iphone/browser.js"></script> <script type="text/javascript" src="js/iphone/cardMenu.js"></script> <script type="text/javascript" src="js/iphone/carouselCard.js"></script> <script type="text/javascript" src="js/iphone/circleMenu.js"></script> <script type="text/javascript" src="js/iphone/community.js"></script> <script type="text/javascript" src="js/iphone/data_update.js"></script> <script type="text/javascript" src="js/iphone/iphone.js"></script> <script type="text/javascript" src="js/iphone/jquery.flick.js"></script> <script type="text/javascript" src="js/iphone/mainMenu.js"></script> <script type="text/javascript" src="js/iphone/ringController.js"></script> <script type="text/javascript" src="js/iphone/savingsUpdater.js"></script> <script type="text/javascript" src="js/iphone/settings.js"></script> <script type="text/javascript" src="js/iphone/topInfo.js"></script> <script type="text/javascript" src="js/iphone/transitions.js"></script>     </head>
    <body class="portrait" onOrientationChange="iphone.orientationCheck();">
        <div id="wrapper"> 
        	<div style="display:none;"> 
            <div id="top-info-wrapper">
    <div class="body">
        <div id="top-info">
            <div class="top-bubbles">
                <div id="saving-index" class="bubble" style="display: none;"></div>
                <div id="saving-index-loading" class="bubble"><img src="images/loader-black.gif"/></div>
                
                <div id="level-index" class="bubble" style="display: none;">
                    <span class="label"></span>
                    <span class="level"></span>
                </div>
                <div id="level-index-loading" class="bubble"><img src="images/loader-black.gif"/></div>
                
                
                <div id="awareness-index" class="bubble" style="display: none;"></div>
                <div id="awareness-index-loading" class="bubble"><img src="images/loader-black.gif"/></div>
                
                
            </div>
        </div>
    </div>
</div>
<div id="saving-panel" class="top-panel off">
    
    <div class="CardMenu" id="" title="">
        <div class="card_pages_container" id="">
            <div class="card_first_page">
                <div class="cardTop">
                    <span class="card_back_button"></span>
                </div>
				<div class="saving_first_page_content">
					<div class="info-panel">
			    	    <p class="intro">				    		<span id="saving-total"></span>
</p>
			    	</div>
			    	<div id="saving-graphics">
				    	<div id="saving-piechart">
				    		<canvas id="pie-canvas" width="200" height="200" onclick="topInfo.savingIndex.clearCake(event);"></canvas>
				    	</div>
				    </div>
				    <div class="clearboth">
				    	<b class="mydatatitle"></b>
			    		<div class="mydata"></div>
			    	</div>
		    	</div>
            </div>
            <div class="card_second_page" id="">
                <div class="cardTop">
                    <span class="card_back_button"></span>
                </div>
    			<div id="saving-piechart"></div>
            </div>
        </div>
    </div>
    
    
    
    
   
	    	

</div>
<div id="level-panel" class="top-panel off">
    <a href="#" class="backButton"></a>
    <h2></h2>
    <div class="info-panel">

    </div>
    <div class="overlay-bar" id="level-overlay">
        <div class="inner-slider"  id="level-component"></div>
        <div class="panel-inner"></div>
        <div class="overlay-explanation">This will be changed</div>
        <div class="overlay-grade"></div>
    </div>
    
    <div class="overlay-bar" id="savings-overlay">
        <div class="inner-slider"  id="saving-component"></div>
        <div class="panel-inner"></div>
        <div class="overlay-explanation">This will be changed</div>
        <div class="overlay-grade"></div>
    </div>

    <div class="overlay-bar" id="awareness-overlay">
        <div class="inner-slider" id="awareness-component"></div>
        <div class="panel-inner"></div>
        <div class="overlay-explanation">This will be changed</div>
        <div class="overlay-grade"></div>
    </div>
    
</div>
<div id="awareness-panel" class="top-panel off">
    <a href="#" class="backButton"></a>
    <h2></h2>
    <div class="info-panel">
        <p class="intro"></p>
        <!--
        <table>
        <tr>
            <td class="quiz-label label">Quiz</td><td class="quiz value">8</td>
        </tr>
        <tr>
            <td class="advice-label label">Advice</td><td class="advice value">4</td>
        </tr>
        <tr>
            <td class="communication-label label">Communication</td><td class="communication value">0</td>
        </tr>
        <tr>
            <td class="score-label label">Total Awareness</td><td class="score value">12</td>
        </tr>
        </table>
        -->
        <div class="icon"></div>
    </div>
    <div class="awareness-overlay">
        <div class="panel-inner"></div>
        <img class="awareness-leaf" id="leaf1" src="images/iphone/awareness-leaf1.png" alt=""/>
        <img class="awareness-leaf" id="leaf2" src="images/iphone/awareness-leaf2.png" alt=""/>
        <img class="awareness-leaf" id="leaf3" src="images/iphone/awareness-leaf3.png" alt=""/>
    </div>
    <div id="awareness-leaf1-info"></div>
    <div id="awareness-leaf2-info"></div>
    <div id="awareness-leaf3-info"></div>
    <div id="awareness-total"></div>
</div>

        	</div>
        	
                  <div id="ring-container">
             <div id="stage">
                <div id="cardRing"></div>
            </div>
       </div>

                        
        <div id="main-menu-wrapper">
            <div id="menu-buttons">  
                <div id="profile-button" class="main-menu"><!-- set by js --></div> 
                <div id="help-button" class="main-menu"><!-- set by js --></div>
                <div id="settings-button" class="main-menu disabled"><!-- set by js --></div> 
                <div id="community-button" class="main-menu disabled"><!-- set by js --></div>
            </div>
            <div id="menu-panel" class="down">
                <div class="menu-panel-header">
                    <div class="button">
                        <a href="#" id="menu-panel-close"><!-- set by js --></a>
                    </div>
                    <div class="title"></div>
                </div>
                <div id="menu-panel-body"></div>
            </div>
        </div>

            <div id="loading">
    <img src="images/loader-black-big.gif" />
</div>

            <!-- 
    These should never be visible. they are used by the javascript to 
    clone templates for use in the application. This avoids having
    markup embedded in the javascript code.
 -->
<div id="templates" style="display:none">
    <!-- mainMenu -->
    <div id="apploginScreen">
        <form id="apploginForm" action="#" method="POST">
          <p class="username">
              <label for="username"></label>
              <input type="text" name="username" id="username" value="" autocapitalize="off" autocorrect="off"/>
          </p>
          <p class="password">
              <label for="password"></label>
              <input type="password" name="password" id="password" value="" autocapitalize="off" autocorrect="off"/>
          </p>
          <p class="remember">
              <input type="checkbox" name="remember" id="remember"/>
              <label for="remember"></label>
          </p>
          <p class="submitHolder">
              <input type="submit" value=""/>
              <img src="images/loader.gif" />
          </p>
        </form>
    </div>
    <div id="applogoutScreen">
        <form id="applogoutForm" action="#" method="POST">
          <p class="message"></p>
          <p>
              <input type="button" id="logoutCancelButton" value=""/>
              <input type="button" id="logoutConfirmButton" value=""/>
          </p>
        </form>
    </div>

    <div id="settingsScreen">
        <form id="settingsForm" action="#" method="POST">
           <!-- <p class="householdName">
                <label for="householdName"></label>
                <input type="text" name="householdName" id="householdName" value=""/>
            </p>
            <p class="householdDwellingSize">
                <label for="householdDwellingSize"></label>
                <input type="text" name="householdDwellingSize" id="householdDwellingSize" value=""/>
            </p>
            <p class="householdState">
                <label for="householdState"></label>
                <select name="householdState" id="householdState">
                </select>
            </p>-->
            <p class="householdLanguage">
                <label for="householdLanguage"></label>
                <select name="householdLanguage" id="householdLanguage">
                </select>
            </p>
            <!--<p class="householdZipcode">
                <label for="householdZipcode"></label>
                <input type="text" name="householdZipcode" id="householdZipcode" value=""/>
            </p>-->
            <p class="submitHolder">
                <input type="submit" value=""/>
                <img src="images/loader.gif" />
            </p><hr>
            <p class="configDeviceButton">
            	<input type="button" value=""/>
            </p>
                        
        </form>
        <p style="color: gray;"><b>Version: </b>0.0.22-SNAPSHOT - ${BUILD_ID}</p>
    </div>

    <!-- cardMenu -->
    <div class="CardMenu" id="" title="">
        <div class="card_pages_container" id="">
            <div class="card_first_page">
                <div class="cardTop">
                    <span class="card_back_button"></span>
                </div>
                <div class="iMenu">
                    <ul class="iArrow">
                    </ul>
                </div>
            </div>
            <div class="card_second_page" id="">
                <div class="cardTop">
                    <span class="card_back_button"></span>
                </div>
                <div class="second_page_data" id=""></div>
            </div>
        </div>
    </div>

    <!-- a card in the circle menu -->
<!--	<div id="" class="card" ontouchstart="ring_controller.interactionStart(event);">-->
	<div id="" class="card">
		<div class="cardWrapper">
			<div class="card_content face">
				<div class="card_pic"><img src="images/general/devices/default/iron.jpg" width="150" height="150"/></div>
				<div id="" class="indicator_container"></div>
				<div class="card_pic_overlay"></div>
				<div class="card_details">
					<span class="consumption_row"><span class="consumption"><img src="images/loader.gif"/></span><span class="consumption_unit">W</span></span>
					<span class="card_name"></span>

				</div>
			</div>
			<div class="card_content back">
			</div>
		</div>
	</div>
	

    <div class="levelInfo" id="levelinfo" title="thetitle">
		<div class="showing_person"></div>
		<div class="level_explanation">
			<div class="from_level">Level 0</div>
			<div class="to_level">Level 1</div>
			<div class="advance_description">One week after initial installation you will advance to level 1</div>		
		</div>
		
		<div class="progress_data">
			<div class="levelBar">
				<div class="advicePart"></div><div class="quizPart"></div>
			</div>
			<div class="levelProgressLabels">
				<div class="adviceLabel">Advice X</div><div class="quizLabel"> Quiz X</div>
			
			</div>
			
			
		</div>
		<div class="different_points" style="display:none;">
		
		</div>

		<div class="levelinfo_bottomtabs"></div>
	</div>
	
	<div id="saving-panel" class="top-panel">
	    
	    <div class="CardMenu2" id="" title="">
	        <div class="card_pages_container2" id="">
	            <div class="card_first_page2">

					<div class="saving_first_page_content2">
						<div class="info-panel">
				    	    					    		<span class="saving-total"></span>
<hr><span class="last-week-breakdown"></span>
				    	</div>
				    	<div class="saving-graphics">
					    	<div class="saving-piechart">
					    		
					    		<canvas id="pie-canvas" border="1" width="200" height="200" onclick="topInfo.savingIndex.clearCake(event);"></canvas>
					    	</div>
					    </div>
					    <div class="clearboth">
					    	<b class="mydatatitle"></b>
				    		<div class="mydata"></div>
				    	</div>
			    	</div>
	            </div>

	        </div>
	    </div>
	    
	    
	    
	    
	   
		    	
	
	</div>

</div>
       </div>
       <div id="help_wrapper">
	   		<div id="openCardPlaceholder" style="display:none;"></div>
	   		<div id="histcues" style="display:none;"></div>
	   </div>
	    		<div id="new_community_screen" style="display: none;">


            <div id="community">
                <ul id="communityTopNav">
                    <li class="profile"><a href="#"></a></li>
                    <li class="members"><a href="#"></a></li>
                    <li class="inbox"><a href="#"></a></li>
                    <li class="close"><a href="#"></a></li>
                </ul>

                <!-- PROFILE -->
                <div id="profileScreen" class="screen">
                    <div class="preamble">
                        <!--<img src="images/iphone/house.png" class="profile-image"/> -->
                        <h3>
                            <img src="images/loader-black.gif" class="loading"/>
                            <span></span>                            
                        </h3> 
                    </div>                    
                    <div class="feed">

	                    <div class="post">
                    <input type="button" class="privateMessageButton" onclick="community.profile.promptPrivateMessage();" value="Private Message"/>  	     
	                        <h3>
	                            <img src="images/loader-black.gif" class="loading"/>
	                            <span></span>
	                        </h3>	                                      
	                        <form id="profileFeedForm" method="POST"><table><tr>
	                            <td><input type="text" class="text" name="message"/></td>
	                            <td><input type="submit" class="submit" value="send"/></td>
	                            </tr>
	                            </table>
	                        </form>
                     
	                    </div>                        
                        <ul></ul>
                    </div>

               
                </div>

                <!-- MEMBERS -->
                <div id="membersScreen" class="screen">
                    <div class="preamble">
                        <h3>
                            <img src="images/loader-black.gif" class="loading"/>
                            <span></span>
                        </h3>
                    </div>
                    <div class="feed">
                        <ul></ul>
                    </div>
                    <div class="post">
                        <h3>
                            <img src="images/loader-black.gif" class="loading"/>
                            <span></span>
                         </h3>
                        <form id="membersPostForm" method="POST">
                            <input type="text" class="text" name="message"/>
                            <input type="submit" value="send"/>
                        </form>
                    </div>
                </div>

                <!-- INBOX -->
                <div id="inboxScreen" class="screen">
                    <div class="preamble">
                        <h3>
                            <img src="images/loader-black.gif" class="loading"/>
                            <span></span>
                         </h3>
                    </div>
                    <div class="feed">
                        <ul></ul>
                    </div>
                </div>

                <!-- FORUM -->
                <div id="forumScreen" class="screen">
                    <div class="preamble">
                        <h3>
                            <img src="images/loader-black.gif" class="loading"/>
                            <span></span>
                         </h3>
                    </div>
                    <div class="feed">
                        <ul></ul>
                    </div>
                    <div class="post">
                        <h3>
                            <img src="images/loader-black.gif" class="loading"/>
                            <span></span>
                         </h3>
                        <form id="forumTopicPostForm" method="POST">
                            <input type="text" class="text" name="message"/>
                            <input type="submit" value="send"/>
                        </form>
                    </div>
                    
                    
                </div>
            </div>
                
            <div id="templates" style="display:none">
                <div id="communityReplyForm" class="inlineForm">
                    <form class="communityReplyForm" method="post">
                        <input type="text" class="text" name="message"/>
                        <input type="submit" value="send"/>
                    </form>
                </div>
                <li id="profileItem" class="item">
                    <div class="inner">
                        <span class="tools">
                            <a href="#" class="delete"></a>
                        </span>
                        <b class="header"></b>
                        <span class="body"></span>

                    </div>
                </li>
                <li id="memberItem" class="item">
                    <div class="inner">
                        <p class="header"></p>
                        <p class="stats"></p>
                    </div>
                </li>
                <li id="inboxItemSet" class="thread">
                    <h4></h4>
                    <ul></ul>
                </li>
                <li id="inboxItem" class="item">
                    <div class="inner">
                        <p class="header"></p>
                        <p class="body"></p>
                        <div class="tools">
                            <a href="#" class="delete"></a>
                            <a href="#" class="reply"></a>
                        </div>
                    </div>
                </li>
            </div>
</div>		<div id="new_help_screen" style="display: none;">
	<div class="close_help" onclick="mainMenu.helpMenu.closeHelp();">
		<!--set by js-->
	</div>
	<div id="help_content">
	
	</div>
	<div class="close_help" onclick="mainMenu.helpMenu.closeHelp();">
		<!--set by js-->
	</div>	
	
</div>			<div id="configSensors" style="display: none;">
    
        <h1>
            Configure Devices
            <p></p>
        </h1>
        <span id="n">21</span>

            <div id="status">
                <img src="images/loader-grey-small.gif" id="loading"/>
                <span class="body"></span>
            </div>
            <form id="apploginForm" method="post">
                <fieldset>
                    <legend>Log in</legend>
                    <p>
                        <label for="username">username</label>
                        <input type="text" name="username" id="username" autocapitalize="off" autocorrect="off"/>
                    </p>
                    <p>
                        <label for="password">password</label>
                        <input type="password" name="password" id="password" autocapitalize="off" autocorrect="off"/>
                    </p>
                    <p>
                        <input type="submit" value="log in"/>
                    </p>
                </fieldset>
            </form>
            <form id="inputForm" method="post">
                    <div id="toolbar">
                        <a href="#" class="button refresh" onclick="configSensors.refresh()">refresh</a>
                        <a href="#" class="button addDevice" onclick="configSensors.addDevice()">add device</a>
                        <span class="cancelbutton"></span>
                        
                    </div>
                    <table class="configtable">

                        <tbody>
                            <tr>
                            	<td>
                                    <fieldset>
									  <legend class="deviceId_h2">device id</legend>
                                    <span class="id"><input type="hidden" name="id"/></span>
                                    <span class="deviceId"><input type="hidden" name="deviceId" kaxlength="5" DISABLED/></span>
                                    
	                                <div class="urlPhoto"><b>picture</b><div class="urlphotocontainer" onclick="configSensors.findAndshowGallery(this.id);return false;"><input type="hidden" name="urlPhoto" value=""/></div></div>
	                                
	                                <p class="name"><b>name</b><input type="text" name="name" style="width: 200px;"/><br></p>
									<p class="type"><b>Type</b><select name="type"><option value=" - ">Please select</option></select></p>
									
									<p class="category"><b>Category</b><select name="category"><option value=" - ">Please select</option></select></p>
                                   </fieldset>                        	
                            	</td>
                            </tr>
                        </tbody>
                    </table>
                    <p class="submitbuttons">
                        <input type="submit" value="save"/>
                        <span class="cancelbutton"></span>
                    </p>                    
            </form>
    </div>
    <div id="gallery" style="display: none;"></div>
    	     
    </body>
</html>
